<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>htmlcss 阶段</title>
    <style>
        h3 {
            font-size: 50px;
            text-align: center;
            padding: 30px 0;
            background-color: #f0f0f0;
            margin: 100px auto;
        }

    </style>
</head>
<body>
    <!-- <h3></h3> -->


<script>



    // 要求：
    // 父类： Time 
        // 属性：当前时间的年，月,日，时，分，秒
  
    // 子类：CurrentTime
        // 方法： getCurrentTime    获取当前的时间字符串 ，例如： 2021年8月11日 18:43:32
        // 方法： showCurrentTime   渲染时间 如截图所示
      

    
    // 编码：
        // 构造函数（父类）
        function Time() {
            // 添加属性
            this.dt = new Date();
            this.yy = this.dt.getFullYear();
            this.mm = this.dt.getMonth() + 1;
            this.dd = this.dt.getDate();

            this.hour = this.dt.getHours();
            this.minute = this.dt.getMinutes();
            this.second = this.dt.getSeconds();
        }


        // 构造函数 （子类）
        function CurrentTime() {
            // 获取父类的属性（改变this指向）
            Time.apply(this);
        }

        // 原型
        // 获取当前的时间字符串
        CurrentTime.prototype.getCurrentTime = function(){
            // 定义字符串
            var str = this.yy + "年"+this.mm+"月"+this.dd+"日 - "+this.hour+":"+this.minute+":"+this.second;
            // 把这个字符串挂载this对象上
            this.str = str;
            // 返回字符串
            return str;
        }
        // 渲染时间
        CurrentTime.prototype.showCurrentTime = function(){
            // 通过this查找str ,渲染str字符串
            // document.write("<h3>"+this.str+"</h3>");
            document.write("<h3>"+this.getCurrentTime()+"</h3>");
        }

        // 创建实例
        // var t = new Time();
        // console.log(t);

        var ct = new CurrentTime();
        console.log(ct);
        // var res = ct.getCurrentTime();
        // console.log(res);// 2021年8月12日 - 10:28:57
        ct.getCurrentTime();
        ct.showCurrentTime();


    










</script>
</body>
</html>